<template>
  <div class="scrollDiv">
    <div class="login-main">
      <headerBack></headerBack>
      <scroller>
      <div class="loginWrap">
        <h2 class="h2">绑定手机号</h2>
        <h5 class="h5">社交账号首次使用需绑定手机号</h5>

        <div class="boxloginWrap">
          <div>
            <div class="login2">
              <xInput
                plvalue="请输入登录手机号"
                groupTitle="手机号"
                v-model="telNum"
                :showXx="showxx"
                v-on:clears="clear"
                type="txt"
              ></xInput>
              <xInput
                plvalue="请输入验证码"
                v-model="yzmNum"
                :yzmtrue="showyzm"
                v-on:clears="clear"
                type="yzm"
                v-on:sends="sendYzm"
                groupTitle="验证码"
                :yzmMsg="yzmMsg"
              ></xInput>
            </div>
            <div>
              <span class="login-desc">
                <i>注册即代表你同意</i>
                <b @click="commonJs.gopush('xieyi')">《用户注册协议》</b>
                <i>和</i>
                <b @click="commonJs.gopush('yinsi')">《隐私政策》</b>
              </span>
              <sumbit-btn   :loading="loadings" message="登录" :isSumbit="showColor1" @btnClick="suresLogin('two')"></sumbit-btn>
              <!-- <span class="login-other" @click="commonJs.gopush('pwdLogin')">
                <i>账号密码登录</i>
              </span>       
              <wx-login></wx-login>-->
            </div>
          </div>
        </div>
      </div>
         </scroller>
    </div>
    <!-- </scroller> -->
  </div>
</template>

<script>
import JSEncrypt from "jsencrypt/bin/jsencrypt";
import xInput from "~/components/xInput";
import headerBack from "~/components/headerBack";
import sumbitBtn from "./components/sumbitBtn";
import wxLogin from "./components/wxLogin";
import { sendMessageCode, getUserInfoById, userBinding } from "~/api/identity";
import ls from "store2";
import { setInterval, clearInterval } from "timers";
import {authLogin} from "~/common/common"; 
export default {
  head: {},
  components: {
    xInput,
    sumbitBtn,
    wxLogin,
    headerBack 
  },
  data() {
    return {
      loadings:false,
      yzmMsg: "发送验证码",
      showyzm: false,
      verifyType: 2,
      telNum: "",
      yzmNum: "",
      showxx: false,
      showColor1: false,
      timer: null,
      nNum: 60,
      gourl: "",
      loginType: ""
    };
  },
  watch: {
    //telNum验证码手机号 yzmNum 验证码

    telNum(e) {
      const reg = /^1[3456789]\d{9}$/;
      if (reg.test(e)) {
        this.showyzm = true;
        if (this.yzmNum.length > 3) {
          this.showColor1 = true;
        } else {
          this.showColor1 = false;
        }
      } else {
        this.showyzm = false;
        this.showColor1 = false;
      }
    },
    yzmNum(e) {
      const reg = /^1[3456789]\d{9}$/;
      if (e.length > 3 && reg.test(this.telNum)) {
        this.showColor1 = true;
      } else {
        this.showColor1 = false;
      }
    }
  },
  mounted() {
    this.$visit(this.$route.path)
    this.gourl = this.$route.query.returnMall;
  },
  methods: {
    sendYzm() {
      if (this.nNum < 60) {
        this.$vux.toast.text("请稍后发送");
        return false;
      }
      if (this.showyzm == false) {
        this.$vux.toast.text("请输入正确11位手机号码");
        return false;
      }
      this.senyam();
      sendMessageCode({
          codeType: 1,
          mobile: this.telNum
        })
        .then(res => {
          this.$vux.toast.text(res.message);
        })
        .catch(error => {
          this.$vux.toast.text(error);
        });
    },
    senyam() {
      this.showyzm = false;
      this.timer = setInterval(() => {
        this.nNum -= 1;
        this.yzmMsg = this.nNum + "秒";
        if (this.nNum <= 0) {
          clearInterval(this.timer);
          this.yzmMsg = "发送验证码";
          this.showyzm = true;
          this.nNum = 60;
        }
      }, 1000);
    },

    clear() {
      this.vals1 = "";
    },
   async suresLogin(type) {
      if (this.showColor1 === true) {
        this.timss = new Date().getTime();
        let loginObj={
          account: this.telNum,
          credentials: this.yzmNum,
          loginTime: this.timss,
          verifyType: 2
        }
      await authLogin(loginObj,this.gourl,"bind");
      this.userBind()
      } else {
        this.$vux.toast.text("请正确填写登录信息");
      }
    },
    userBind() {
      //绑定uid和unionid
      if(!ls.get("yxkData")){
        return ;
      }
      this.loadings = true
      let obj = {
        uid: ls.get("yxkData").userVoId,
        unionId: ls.get("wxuniond"),
        userType: ls.get("yxkData").userType
      };
      userBinding(obj)
        .then(res => {
          if (res.code == 0) {
            this.bind = true;
            this.isBind = 1;
            let yxkdata = ls.get("yxkData");
            yxkdata.isBinding = 1;
            ls.set("yxkData", yxkdata);
            if (this.gourl) {
              this.gourl = decodeURIComponent(this.gourl);
              let urls =this.gourl +"sx_uid="+ls.get('userVoId') +"&sx_token="+ls.get("tokensyxk")+"&open_id="+ls.get("wxopen_id");
              window.location.replace(urls);
            } else {
              let goRoute  = sessionStorage.getItem('goesRouter');
              if(goRoute){
                  goRoute = JSON.parse(sessionStorage.getItem('goesRouter'))            
                  if(goRoute){
                  sessionStorage.clear();
                  if(goRoute.category==='user'){
                     this.goRoutes("../user") 
                  }else if(goRoute.category==='home'){
                     this.goRoutes("../home")             
                  }            
                  }else if(goRoute.category==='vip'){
                    this.goRoutes("../vipUserRoute/openVip?isJustIn=true")
                  }else{
                    this.goRoutes("../user")
                  }
              }else{
                this.goRoutes("../user")
              }        
            }
            this.$vux.toast.text(res.message);
          }else{
            this.$vux.toast.text(res.data.message);
          }
          
        })
        .finally(() => {
          this.loadings = false
        });
    },
    goRoutes(routerName){
      this.$router.replace({
        path: "../" + routerName
      })
    },
  
  }
};
</script>

<style scoped lang="less">
.scrollDiv {
  width: 100%;
  height: 100vh;
  background: #fff;
  overflow: hidden;
}

.login-main {
  width: 100%;
  height: 100vh;
  background: #fff;
  .h2 {
    font-size: 0.4rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(29, 30, 34, 1);
    line-height: 0.4rem;
    text-align: center;
  }
  .h5 {
    font-size: 0.26rem;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 0.4rem;
    text-align: center;
    margin-top: 0.25rem;
  }
}
.loginWrap {
  width: 100%;
  height: auto;
  min-height: 100vh;
  background: #fff;
  padding: 1.2rem 0.6rem;
  margin-top: 0.3rem;
  overflow: hidden;
  
  .boxloginWrap {
    width: 100%;
    height: auto;
    margin: 0.87rem 0 0;
    box-sizing: border-box;

    .login2 {
      width: 100%;
      height: auto;
      box-sizing: border-box;
    }

    .forgetPwd {
      display: block;
      height: 0.3rem;
      line-height: 0.3rem;
      text-align: center;
      color: #999;
      font-size: 0.28rem;
      margin-top: 0.5rem;
    }

    .login2 {
      margin-bottom: 0.5rem;
    }
  }
}
.login-desc {
  display: block;
  margin: 0.3rem auto;
  text-align: center;
  width: 100%;
  i,
  b {
    font-size: 0.26rem;
    font-family: PingFangSC;
    font-weight: 400;

    line-height: 0.4rem;
  }
  i {
    color: rgba(153, 153, 153, 1);
  }
  b {
    color: @assistColor;
  }
}
.login-other {
  display: block;
  margin: 0.3rem auto;
  text-align: center;
  width: 100%;
  i {
    font-size: 0.26rem;
    font-family: PingFangSC;
    font-weight: 400;
    vertical-align: middle;
    line-height: 0.4rem;
    color: rgba(153, 153, 153, 1);
  }
  .right-img {
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    vertical-align: middle;
    margin-left: 0.1rem;
  }
}
</style>
